<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<style>
<!--
	.selectpicker_color{color:blue;}
-->
</style>

<div class="container">
	<div class="row">
		<fieldset>
			<legend>总店角色管理</legend>
			<div>
				<form id="roleForm" class="form-horizontal">
					<div class="form-group">
						<div class="col-md-2">
							<input type="text" class="form-control" id="name" name="name" placeholder="输入角色名称" autocomplete="off"/>
						</div>
						<button type="submit" id="btnCreate" acid="10050101" class="button button-rounded button-flat-primary" style="margin-left:0px;">
							<i id="imgLoading" class="fa fa-spinner fa-spin" style="display:none"></i> 创建角色</button>
						<img class="imgLoading" src="resources/assets/img/loading_small.gif" />
					</div>
				</form>
				<table id="table"
					class="table table-hover table-striped table-bordered">
					<thead>
						<tr style="background-color:#428bca;color:#FFF;">
							<th style="width:1%;">#</th>
							<th class="td_center" style="width:6%">角色编号</th>
							<th class="td_center" style="width:6%">角色名称</th>
							<th class="td_center" style="width:4%">角色级别</th>
							<th class="td_center" style="width:4%">操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
				<ul class="pagination">
				</ul>
			</div>
		</fieldset>
	</div>
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top:50px;" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
		    <form id="roleUpdForm" class="form-horizontal">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" acid="10050102"  aria-hidden="true">&times;</button>
			        <h4 class="modal-title" id="myModalLabel">修改角色名称</h4>
			      </div>
			      <div class="modal-body">
			      		<div class="form-group">
			      			<label class="col-lg-2 col-lg-offset-2 control-label">角色名称</label>
							<div class="col-lg-6">
								<input type="text" class="form-control" id="uname"
									name="name" placeholder="输入角色名称" autocomplete="off"/>
							</div>
						</div>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="submit" id="btnUpdate" acid="10050102" class="button button-rounded button-flat-primary"> 修改保存</button>
			        <img class="imgLoading1" src="resources/assets/img/loading_small.gif" hidden="true" />
			      </div>
			      <input type="hidden" id="inputRole" class="inputRole" />
		      </form>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>

<script>

$(document).ready(function() {
	var reLoad = false;
	var pageSize = 10;
	var keyword = '';
	var source = '${source}';
	var updated = {};
	var result = {}; 

	buttonsBlur();

	$("#name").change(function(){ 
		actionController();
	});
 
	if(source == 'left') {
		window.role_main_list = undefined;
		fetchData(0);
	}else if(window.role_main_list){
		successHandle(window.role_main_list);
	}
	
	$('#roleForm').bootstrapValidator({
		live : 'disabled',
		feedbackIcons : {
			valid : 'glyphicon glyphicon-ok',
			invalid : 'glyphicon glyphicon-remove',
			validating : 'glyphicon glyphicon-refresh'
		},
		submitHandler : function(validator, form, submitButton) {
			showLoading('#btnSubmit');
			var name = $('#name').val();
			var type = 0;
			var data = {name:name,type:type};

			if(ACTIONS['10050101']){
				$.scojs_message('没有权限!', $.scojs_message.TYPE_ERROR);
				return;
			}
			
			$.post('./api/role', data).done(function(data) {
				hideLoading('#btnSubmit');
				if (data.state == SUCCESS) {
					//成功后重置表单
					clearForm();
					fetchData(0);
					$.scojs_message('角色添加成功!', $.scojs_message.TYPE_OK);
				} else if(data.state == ACCOUNT_EXISTS) {
					$.scojs_message('角色已经存在了，不能重复添加!', $.scojs_message.TYPE_ERROR);
				} else {
					$.scojs_message('服务器错误，角色添加失败!', $.scojs_message.TYPE_ERROR);
				}
			});
		},
		fields : {
			name : {
				validators : {
					notEmpty : {
						message : '角色名称不能为空'
					},
					remote: {
						url: './api/role/exists',
						message: '角色已经存在了',
						data:{type:0}
					}
				}
			}
		}
	});
	
	$('#roleUpdForm').bootstrapValidator({
		live : 'disabled',
		feedbackIcons : {
			valid : 'glyphicon glyphicon-ok',
			invalid : 'glyphicon glyphicon-remove',
			validating : 'glyphicon glyphicon-refresh'
		},
		submitHandler : function(validator, form, submitButton) {
			var name = $('#uname').val();
			var roleId = updated.roleId;
			var type = 0;
			var data = {name:name, id:roleId, type:type};
			$('.imgLoading1').attr('hidden', false);
			$.ajax({
				url:'./api/role',
				type:'PUT',
				data: data,
				success:updSuccessHandle
			});
		},
		fields : {
			name : {
				validators : {
					notEmpty : {
						message : '角色名称不能为空'
					},
					remote: {
						url: './api/role/exists',
						message: '角色已经存在了',
						data:updated
					}
				}
			}
		}
	});
	
	function fetchData(pageIndex) {
		$('.imgLoading').attr('hidden', false);
		
		var url = './api/role/main';
		var data = {};
		data.pageSize = pageSize;
		data.pageIndex = pageIndex;
		
		$.get(url, data, successHandle);
	}
	
	function successHandle(rs) {
		$('.imgLoading').attr('hidden', true);

		if(rs.total && rs.total > 0)
			window.role_main_list = rs;
		loadDatas(rs);
	}
	
	function updSuccessHandle(data) {
		$('.imgLoading1').attr('hidden', true);
		if (data.state == SUCCESS) {
			//成功后重置表单
			fetchData(0);
			$('#myModal').modal('hide');
		} else if(data.state == ACCOUNT_EXISTS) {
			$.scojs_message('角色已经存在了，不能重复修改!', $.scojs_message.TYPE_ERROR);
		} else {
			$.scojs_message('服务器错误，角色添加失败!', $.scojs_message.TYPE_ERROR);
		}
	}
	
	function loadDatas(rs) {
		var html = '';var total = rs.total;
		for(var i = 0; i < rs.data.length; i++) {
			var row = rs.data[i];
			html += '<tr>';
			html += '<td>' + (i+1) + '</td>';
			html += '<td class="td_center" id="code'+row.id+'">' + row.code + '</td>';
			html += '<td class="td_center" id="name'+row.id+'">' + row.name + '</td>';
			html += '<td class="td_center" id="type'+row.id+'">' + (row.type==0?'<font color=#4682B4>总店角色</font>':'<font color=green>分店角色</font>') + '</td>';
			html += '<td>';
			
			html += '<button class="button button-pill button-flat-primary button-small" acid="10050102" name="btn_upd" data-id="'+row.id+'"><i class="fa fa-edit"></i> 修改</button>';	
			html += '&nbsp;<button acid="10050103" type="button" class="button button-pill button-flat-action button-small" name="btn_permission" data-id="'+row.id+'"><span class="glyphicon glyphicon-star"></span> 权限分配</button>';
			html += '</td></tr>';
		}
		
		$('#tbody').html(html);
		isEmpty(rs.data, 4);
		
		if(!reLoad) createPage(total);
 		
		bindEvents();

		actionController();
	}

	function bindEvents() {
		$(":button[name='btn_upd']").click(function(event){
			$('#roleUpdForm').data('bootstrapValidator').resetForm(true);
			
			var id = $(this).attr('data-id');
			var name = $("#name"+id).html();
			$('#uname').val(name);

			updated.roleId = id;
			updated.type = 0;
			
			$('#myModal').modal('show');
		});
		
		$(":button[name='btn_permission']").click(function(event){
			var id = $(this).attr('data-id');
			var name = $("#name"+id).html();
			var params = '?roleId='+id+'&type=0';
			$("#main-content").load('./admin/role_permission'+params,function(){
				$('#roleName').text(name);
			});
		});
	};
	
	function createPage(total) {
		reLoad = true;
		$(".pagination").jBootstrapPage({
			pageSize : pageSize,
			total : total,
			maxPageButton:10,
			onPageClicked: function(obj, pageIndex) {
				fetchData(pageIndex,keyword);
			}
		});
	}
	
	function clearForm() {
		$('#roleForm').data('bootstrapValidator').resetForm(true);
	}
});

</script>

